<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row>
        <el-col :xl="12" :lg="12" :md="12" :sm="24">
          <div class="leftPart">
            <div class="title">创建建议书</div>

            <el-form
              :model="formData"
              :rules="formRules"
              ref="formData"
              label-width="110px"
              class="demo-formData"
            >
              <el-form-item
                prop="templateId"
                label="建议书模板"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="formData.templateId"
                  filterable
                  placeholder="请选择"
                  clearable
                  class="proInputWidth"
                >
                  <el-option
                    v-for="item in templateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="way" label="创建方式">
                <el-radio-group
                  v-model="formData.way"
                  text-color="#606266"
                  fill="#009588"
                >
                  <el-radio :disabled="disabled" :label="1"
                    >创建1个建议书</el-radio
                  >
                  <el-radio :disabled="disabled" :label="2"
                    >按项目扣分项批量创建</el-radio
                  >
                </el-radio-group>
              </el-form-item>

              <el-form-item prop="mainType" label="用工主体" v-if="batch">
                <el-radio-group
                  v-model="formData.mainType"
                  text-color="#606266"
                  fill="#009588"
                >
                  <el-radio label="5">施工方</el-radio>
                  <el-radio label="0">建设方</el-radio>
                </el-radio-group>
              </el-form-item>

              <template v-if="!batch">
                <el-form-item
                  prop="projectId"
                  label="工程项目"
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.projectId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="proInputWidth"
                    @change="projectChange"
                  >
                    <el-tooltip
                      placement="bottom"
                      v-for="item in projectList"
                      :key="item.id"
                      effect="dark"
                    >
                      <div slot="content">
                        <div
                          :style="{ maxWidth: '200px', wordBreak: 'break-all' }"
                        >
                          {{ item.projectName }}
                        </div>
                      </div>
                      <el-option
                        :label="
                          item.projectName.length > 20
                            ? item.projectName.substring(0, 20) + '...'
                            : item.projectName
                        "
                        :value="item.id"
                      ></el-option>
                    </el-tooltip>
                  </el-select>
                </el-form-item>

                <el-form-item
                  prop="mainId"
                  label="用工主体"
                  class="row-padding-bottom"
                >
                  <el-select
                    v-model="formData.mainId"
                    filterable
                    placeholder="请选择"
                    clearable
                    class="proInputWidth"
                    @change="subjectChange"
                    @focus="onfocusSubject"
                  >
                    <el-option
                      v-for="item in mainList"
                      :key="item.id"
                      :label="item.companyName + '（' + item.typeStr + '）'"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>

              <el-form-item prop="problemArr" label="用工问题">
                <el-button type="primary" class="btnStyle" @click="clickProblem"
                  >添加用工问题</el-button
                >
                <div class="problemBox" v-if="formData.problemArr.length > 0">
                  <ul>
                    <li
                      v-for="(item, index) in formData.problemArr"
                      :key="item.indexId"
                    >
                      <div class="reason">{{ item.reason }}</div>
                      <i
                        class="el-icon-close closeIcon"
                        @click="deleteProblem(index)"
                      ></i>
                    </li>
                  </ul>
                </div>
              </el-form-item>
              <el-form-item class="row-padding-bottom" v-if="batch">
                <el-form-item
                  prop="areaArr"
                  style="display: inline-block; width: 38%"
                >
                  <el-cascader
                    v-model="formData.areaArr"
                    :options="areaList"
                    placeholder="请选择区域"
                    clearable
                    style="width: 98%"
                    ref="manageArea"
                    @change="getAreaId"
                    filterable
                    :props="{ checkStrictly: true }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item
                  prop="rangeIndustry"
                  style="display: inline-block; width: 38%"
                >
                  <el-select
                    v-model="formData.rangeIndustry"
                    filterable
                    placeholder="请选择行业"
                    clearable
                    style="width: 98%"
                  >
                    <el-option
                      v-for="item in industryList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <template slot="label">
                  <div><span style="color: #f56c6c">*</span> 项目范围</div>
                </template>
              </el-form-item>

              <el-form-item
                prop="rectifyDate"
                label="整改期限"
                class="row-padding-bottom projectName"
              >
                <el-date-picker
                  v-model="formData.rectifyDate"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="请选择"
                  class="proInputWidth"
                ></el-date-picker>
                截止
              </el-form-item>
              <el-form-item
                prop="inspector"
                label="监察员"
                class="row-padding-bottom projectName"
              >
                <el-input
                  v-model="formData.inspector"
                  placeholder="请输入监察员"
                  clearable
                  class="proInputWidth"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="tel"
                label="联系电话"
                class="row-padding-bottom projectName"
              >
                <el-input
                  v-model="formData.tel"
                  placeholder="请输入联系电话"
                  clearable
                  class="proInputWidth"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="handleMan"
                label="经办单位"
                class="row-padding-bottom projectName"
              >
                <el-input
                  v-model="formData.handleMan"
                  placeholder="请输入经办单位"
                  clearable
                  class="proInputWidth"
                ></el-input>
              </el-form-item>
            </el-form>

            <div class="submitBox">
              <el-button
                type="primary"
                class="commonBut saveBtn"
                @click="saveForm"
                :loading="isSaveLoading"
              >
                {{ batch ? '预览建议书' : '创建建议书' }}
              </el-button>
            </div>
          </div>
        </el-col>
        <el-col :xl="12" :lg="12" :md="12" :sm="24">
          <div class="rightPart">
            <div class="title">
              建议书预览
              <span class="subTitle">（请在页面左侧输入建议书内容）</span>
            </div>
            <div class="previewContainer">
              <div class="previewContent">
                <h1 class="ctTtile">劳动保障监察建议书</h1>
                <p class="ctUscc">
                  {{
                    formData.unit
                  }}人社监建<span>[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</span>号
                </p>
                <span class="underLine" v-if="formData.showCompanyName !== ''"
                  >{{ formData.showCompanyName }}:</span
                >
                <span class="underLine" v-else
                  >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                >
                <div class="content">
                  <div class="pt24">
                    经调查，你单位在<span
                      class="underLine"
                      v-if="formData.showProjectName !== ''"
                      >{{ formData.showProjectName }}</span
                    ><span class="underLine" v-else
                      >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                    >劳动用工中存在以下问题：<br />
                    <div v-if="formData.problemArr.length > 0">
                      <div
                        v-for="(item, index) in formData.problemArr"
                        :key="'show-' + item.indexId"
                      >
                        <span class="underLine">
                          {{ index + 1 }}、{{ item.reason }}
                        </span>
                        <br />
                      </div>
                    </div>
                    <div class="underLine suggest" v-else>
                      &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                    </div>
                  </div>
                  <div class="pt24">
                    为规范你单位的劳动用工行为，降低用工风险，保证劳动者合法权益，现提出以下建议：<br />
                    <div v-if="formData.problemArr.length > 0">
                      <div
                        v-for="(item, index) in formData.problemArr"
                        :key="'tip-' + item.indexId"
                      >
                        <div
                          class="underLine suggest"
                          v-html="index + 1 + '、' + item.tipStr"
                        ></div>
                      </div>
                    </div>
                    <div class="underLine suggest" v-else>
                      &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                    </div>
                  </div>
                  <p class="pt24">
                    请你单位及时整改，并将整改情况于<span
                      class="underLine"
                      v-if="formData.rectifyDateStr !== ''"
                      >{{ formData.rectifyDateStr }}</span
                    ><span class="underLine" v-else
                      >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                    >前报我局。
                  </p>
                  <p class="pt24">
                    监察员<span
                      class="underLine"
                      v-if="formData.inspector !== ''"
                      >{{ formData.inspector }}</span
                    ><span class="underLine" v-else
                      >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                    >，联系电话<span
                      class="underLine"
                      v-if="formData.tel !== ''"
                      >{{ formData.tel }}</span
                    ><span class="underLine" v-else
                      >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                    >
                  </p>
                  <p class="ctClub">
                    <span class="underLine" v-if="formData.handleMan !== ''">{{
                      formData.handleMan
                    }}</span>
                    <span class="underLine" v-else
                      >&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</span
                    >
                  </p>
                  <p class="ctDate">
                    &nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </p>
                </div>
              </div>

              <div class="note">
                注：本建议书一式两份，一份交被监察单位，一份保存
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!--用工问题-->
      <el-dialog
        title="添加用工问题"
        :visible.sync="showProblem"
        width="50%"
        :close-on-click-modal="false"
      >
        <el-checkbox-group v-model="formData.problemId">
          <el-checkbox
            v-for="item in problemList"
            :label="item.indexId"
            :key="item.indexId"
            >{{ item.reason }}
          </el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showProblem = false">取 消</el-button>
          <el-button type="primary" @click="submitProblem" class="saveBtn"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-dialog
        title="温馨提示"
        :visible.sync="showRepeat"
        width="40%"
        :close-on-click-modal="false"
      >
        <div class="repeatTxt">
          建议书添加的此项目责任主体的用工问题，与该项目其他已创建建议书的待整改用工问题重复，不能重复添加；具体重复问题如下：
        </div>
        <div class="repeatProblem">
          <div v-for="item in repeatList" class="problemItem">
            {{ item.name }}
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showRepeat = false">取 消</el-button>
          <el-button @click="showRepeat = false" type="primary" class="saveBtn"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <notice-dialog
      ref="noticeDialog"
      @changeNotice="changeNotice"
      @sure="sure"
    />
  </div>
</template>
<script>
import topTitle from '@/components/publicCom/topTitle'
import noticeDialog from '@/components/onlineLaw/noticeDialog'
export default {
  name: 'addProposal',
  components: {
    topTitle,
    noticeDialog,
  },
  data() {
    return {
      disabled: true,
      id: '',
      name: '',
      showRepeat: false,
      repeatList: [],
      search: '',
      batch: false, // 是否批量方式
      titleText: '返回列表',
      back: true,
      isSaveLoading: false, // 保存loading
      formData: {
        type: 'json',
        sms: 0,
        templateId: '', //建议书模板
        way: 1, //创建方式
        rectifyDateStr: '',
        showProjectName: '', // 预览时显示的项目名称，批量时显示XXX项目
        showCompanyName: '', // 预览时显示的企业名称，批量时显示XXX企业
        projectId: '', //工程项目ID
        projectName: '', //工程项目名称
        pbUscc: '',
        pcUscc: '',
        managerTel: '',
        leaderTel: '',
        mainId: '', //用工主体ID，批量时为0
        mainName: '', //用工主体名称
        mainType: '', //用工主体类型
        problemArr: [], //用工问题，存储选择的问题
        problemId: [], //用工问题，存储选择的问题
        rangeIndustry: '', //项目范围，行业id
        rangeArea: '', //项目范围，地区id
        areaArr: [],
        rectifyDate: '', //整改日期
        inspector: '', //监察员
        tel: '',
        handleMan: '', //经办单位
        unit: '',
      },
      //时期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        },
      },
      industryList: [], //项目范围，行业
      areaList: [], //项目范围，地区

      templateList: [], //建议书模板下拉
      projectList: [], //工程项目下拉
      projectLoad: false, // 避免重复加载项目
      mainList: [], //用工主体
      showProblem: false,
      problemList: [], //用工问题集合
      formRules: {
        templateId: [
          { required: true, message: '请选择建议书模板', trigger: 'change' },
        ],
        way: [{ required: true, message: '请选择创建方式', trigger: 'change' }],
        // 批量方式
        mainType: [
          { required: true, message: '请选择用工主体', trigger: 'change' },
        ],
        projectId: [
          { required: true, message: '请选择工程项目', trigger: 'change' },
        ],
        mainId: [
          { required: true, message: '请选择用工主体', trigger: 'change' },
        ],
        problemArr: [
          {
            type: 'array',
            required: true,
            message: '请选择用工问题',
            trigger: 'change',
          },
        ],
        areaArr: [
          {
            type: 'array',
            required: true,
            message: '请选择地区',
            trigger: 'change',
          },
        ],
        rectifyDate: [
          { required: true, message: '请选择整改截止日期', trigger: 'change' },
        ],
        inspector: [
          { required: true, message: '请填写监察员', trigger: 'change' },
          {
            min: 1,
            max: 128,
            message: '字符个数不能超过128个',
            trigger: 'blur',
          },
        ],
        tel: [
          { required: true, message: '请填写联系电话', trigger: 'change' },
          { min: 1, max: 64, message: '字符个数不能超过64个', trigger: 'blur' },
        ],
        handleMan: [
          { required: true, message: '请填写经办单位', trigger: 'change' },
          { min: 1, max: 64, message: '字符个数不能超过64个', trigger: 'blur' },
        ],
      },
    }
  },

  watch: {
    'formData.way'(val) {
      if (this.templateList.length === 0) {
        this.getAllTemplate()
      }
      if (this.projectList.length === 0) {
        if (!this.projectLoad) {
          this.getAllProject()
        }
      }
      this.batch = val === 2
      // 批量方式，项目ID=-1，用工主体ID=-1
      if (this.batch) {
        this.formData.showProjectName = 'XXX工程项目'
        this.formData.showCompanyName = 'XXX公司'
        this.formData.mainId = -1
        this.formData.mainName = '系统匹配'
        this.formData.mainType = ''
        this.formData.projectId = -1
        this.formData.projectName = '系统匹配'
        this.formData.pbUscc = ''
        this.formData.pcUscc = ''
        this.formData.pbName = ''
        this.formData.pcName = ''
        this.formData.managerTel = ''
        this.formData.leaderTel = ''
        this.formData.problemArr = []
        this.formData.problemId = []
        if (this.industryList.length === 0) {
          this.getIndustry()
        }
        if (this.areaList.length === 0) {
          this.getArea()
        }
      } else {
        this.formData.showProjectName = ''
        this.formData.showCompanyName = ''
        this.formData.mainId = ''
        this.formData.mainName = ''
        this.formData.mainType = ''
        this.formData.projectId = ''
        this.formData.projectName = ''
        this.formData.pbUscc = ''
        this.formData.pcUscc = ''
        this.formData.pbName = ''
        this.formData.pcName = ''
        this.formData.managerTel = ''
        this.formData.leaderTel = ''
        this.formData.rangeArea = ''
        this.formData.rangeAreaIndustry = ''
      }
    },
    'formData.projectId'(val) {
      if (val) {
        this.getUnit(val)
      }
    },
    // 用工主体切换，选择的问题清空
    'formData.mainType'(val) {
      if (val) {
        this.formData.problemId = []
        this.formData.problemArr = []
      }
    },
    'formData.rectifyDate'(val) {
      if (val) {
        let dt = new Date(val)
        this.formData.rectifyDateStr =
          dt.getFullYear() +
          '年' +
          (dt.getMonth() + 1) +
          '月' +
          dt.getDate() +
          '日'
      } else {
        this.formData.rectifyDateStr = ''
      }
    },
  },
  created: function () {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    if (!this.id) {
      this.disabled = false
    }
    if (this.templateList.length === 0) {
      this.getAllTemplate()
    }
    if (this.projectList.length === 0) {
      if (!this.projectLoad) {
        this.getAllProject()
      }
    }
    this.getIndustry()
    this.getArea()
  },
  beforeRouteUpdate(to, from, next) {},

  methods: {
    //获取选中的区域最后一级id
    getAreaId() {
      this.formData.rangeArea =
        this.formData.areaArr[this.formData.areaArr.length - 1]
    },
    getIndustry() {
      const that = this
      this.axios({
        method: 'get',
        url: 'api-bs/base/dicitem/getuserindustry',
      })
        .then((res) => {
          if (res && res.data) {
            that.industryList = [
              { code: '', name: '全部行业' },
              ...res.data.result,
            ]
          }
        })
        .catch((error) => {
          that.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    getArea() {
      const that = this
      let areaId = localStorage.getItem('areaId')
      this.axios({
        method: 'get',
        url: 'api-bs/areadic/base/detailbyareaid',
        params: { areaId: areaId },
      })
        .then((res) => {
          if (res && res.data) {
            that.areaList = res.data.result
          }
        })
        .catch((error) => {
          that.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    //点击添加问题
    clickProblem() {
      if (!this.batch) {
        if (!this.formData.projectId) {
          this.$message({
            showClose: true,
            message: '请先选择工程项目',
            type: 'error',
          })
          return
        }
      }
      if (
        this.formData.mainType === '' ||
        this.formData.mainType === undefined ||
        this.formData.mainType === null
      ) {
        this.$message({
          showClose: true,
          message: '请先选择用工主体',
          type: 'error',
        })
        return
      }
      this.getIndex()
    },
    // 项目切换
    projectChange(val) {
      this.formData.mainId = ''
      this.mainList = []
      if (val) {
        let projectName = ''
        let pbUscc = ''
        let pcUscc = ''
        let pbName = ''
        let pcName = ''
        let managerTel = ''
        let leaderTel = ''
        this.projectList.forEach((it) => {
          if (it.id === val) {
            projectName = it.projectName
            pbUscc = it.pbUscc
            pcUscc = it.pcUscc
            pbName = it.pbName
            pcName = it.pcName
            managerTel = it.managerTel
            leaderTel = it.leaderTel
          }
        })
        this.formData.projectName = projectName
        this.formData.pbUscc = pbUscc
        this.formData.pcUscc = pcUscc
        this.formData.pbName = pbName
        this.formData.pcName = pcName
        this.formData.managerTel = managerTel
        this.formData.leaderTel = leaderTel
        this.formData.showProjectName = projectName
      }
    },
    // 单个：用工主体切换
    subjectChange(val) {
      let ts = this
      if (val) {
        ts.mainList.forEach((it) => {
          if (it.id === val) {
            //单个方式，用工主体类型，从数据中获取
            ts.formData.mainType = it.type
            ts.formData.mainName = it.companyName
            ts.formData.showCompanyName = it.companyName
          }
        })
      } else {
        ts.formData.mainId = ''
        ts.formData.mainType = ''
        ts.formData.mainName = ''
      }
    },
    // 取模板
    getAllTemplate() {
      console.log('getAllTemplate')
      this.axios({
        method: 'get',
        url: 'api-ps/enforce/template/all',
      })
        .then((resp) => {
          this.templateList = resp.data.result.templateList
          this.formData.unit = resp.data.result.area
        })
        .catch((resp) => {
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
    // 取项目列表
    getAllProject() {
      this.projectLoad = true
      this.axios({
        method: 'post',
        url: 'api-ps/enforce/template/project',
        data: { projectName: this.search, id: this.id },
      })
        .then((resp) => {
          this.projectList = resp.data.result.projectList
          this.projectLoad = false
          if (this.id) {
            this.formData.projectId = this.id
            this.projectChange(this.id)
          }
        })
        .catch((resp) => {
          this.projectLoad = false
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
    // 取项目的参建单位
    getUnit(projectId) {
      this.axios({
        method: 'post',
        url: 'api-ps/enforce/template/unit',
        data: { projectId: projectId },
      })
        .then((resp) => {
          this.mainList = resp.data.result
        })
        .catch((resp) => {
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
    // 取问题列表
    getIndex() {
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: '', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('body'), //loadin覆盖的dom元素节点
      })
      this.problemList = []
      let url = 'api-ps/enforce/template/single'
      if (this.batch) {
        url = 'api-ps/enforce/template/batch'
      }
      this.axios({
        method: 'post',
        url: url,
        data: {
          projectId: this.formData.projectId,
          type: this.formData.mainType,
        },
      })
        .then((resp) => {
          //成功回调函数停止加载
          loading.close()
          if (resp.data.hasError) {
            this.$message({
              type: 'error',
              message: '获取用工问题出错！',
            })
            return
          }
          if (resp.data.result && resp.data.result.length > 0) {
            this.problemList = resp.data.result
            this.problemList.forEach((it) => {
              it.reason = it.reason.replaceAll('1、扣分原因：', '')
              it.reason = it.reason.replaceAll('2、扣分明细：', '')
              it.tip = it.tipStr
              it.tipStr = '<div class="tipBox">' + it.tipStr + '</div>'
            })
            this.showProblem = true
          } else {
            this.$message({
              type: 'error',
              message: '无用工问题数据！',
            })
          }
        })
        .catch((resp) => {
          //成功回调函数停止加载
          loading.close()
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
    goBack() {
      this.$refs['formData'].resetFields()
      this.$router.push('/home/onlineLaw/proposal')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/onlineLaw/proposal',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    //若未选择工程项目则点击用工主体时提示
    onfocusSubject() {
      if (!this.batch && !this.formData.projectId) {
        this.$message({
          showClose: true,
          message: '请先选择工程项目',
          type: 'error',
        })
      }
    },
    submitProblem() {
      this.showProblem = false
      this.formData.problemArr = []
      if (this.formData.problemId.length > 0) {
        this.formData.problemId.forEach((index) => {
          this.problemList.forEach((item) => {
            if (index === item.indexId) {
              this.formData.problemArr.push(item)
            }
          })
        })
      }
    },
    deleteProblem(index) {
      this.formData.problemArr.splice(index, 1)
      this.formData.problemId.splice(index, 1)
    },
    changeNotice(val) {
      //选择短信通知
      console.log(val, '调用')
      if (val) {
        this.formData.sms = 1
      } else {
        this.formData.sms = 0
      }
    },
    sure() {
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: '', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('body'), //loadin覆盖的dom元素节点
      })
      this.axios({
        method: 'POST',
        url: 'api-ps/enforce/config/add/single',
        data: this.formData,
        headers: {
          'Content-Type': 'application/json', //设置请求头请求格式为JSON
        },
      })
        .then((resp) => {
          console.log(resp, 'add result')
          if (resp.hasError) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.errorMsg || '创建失败！',
              type: 'error',
            })
            //成功回调函数停止加载
            loading.close()
            return
          }
          if (
            resp.data.hasError &&
            resp.data.result &&
            resp.data.result.repeatDtoList.length > 0
          ) {
            this.showRepeat = true
            this.repeatList = resp.data.result.repeatDtoList
            //成功回调函数停止加载
            loading.close()
            return
          }
          if (resp.data.hasError && resp.data.msg) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.data.msg,
              type: 'error',
            })
            //成功回调函数停止加载
            loading.close()
            return
          }
          if (!resp.data.hasError) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '创建成功',
              type: 'success',
            })
            let ts = this
            setTimeout(function () {
              //成功回调函数停止加载
              loading.close()
              ts.$router.push({
                name: 'finishProposal',
                query: { id: resp.data.result.configId },
              })
            }, 3000)
          }
        })
        .catch((resp) => {
          //成功回调函数停止加载
          loading.close()
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
    },
    saveForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.batch) {
            let objData = { data: this.formData, problemList: this.problemList }
            this.$store.commit('CHANGE_PROPOSAL_DATA', objData)
            this.$router.push({ name: 'previewProposal' })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/onlineLaw/addProposal',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$refs.noticeDialog.showDialog()
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    padding: 24px;
    .title {
      position: relative;
      padding-left: 20px;
      padding-bottom: 30px;
      font-size: 18px;

      &::before {
        position: absolute;
        content: '';
        width: 4px;
        height: 24px;
        left: 0;
        top: 0;
        background: #265faa;
      }

      .subTitle {
        font-size: 14px;
      }
    }

    .leftPart {
      .proInputWidth {
        width: 76%;
      }

      .scopeInputWidth {
        width: 38%;
      }

      .el-checkbox,
      .el-checkbox__input {
        display: block;
      }

      /deep/ .el-radio__input.is-checked + .el-radio__label {
        color: #606266;
      }

      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #009588;
        background: #009588;
      }

      .problemBox {
        width: 75%;
        margin-top: 10px;
        padding: 12px;
        background: #f5f7fa;
        border: 1px solid #dee5f4;
        border-radius: 4px;

        ul {
          li {
            position: relative;
            line-height: 16px;
            padding: 8px 0;

            &:hover {
              background: #e4ebf1;
              cursor: pointer;
            }
            .reason {
              width: 95%;
            }
            .closeIcon {
              position: absolute;
              right: 0;
              top: 8px;
            }
          }
        }
      }

      .btnStyle {
        width: 136px;
        height: 36px;
        line-height: 37px;
        border: 1px solid #009588;
        border-radius: 21px;
        font-size: 14px;
        color: #009588;
        text-align: center;
        background: #fff;
        padding: 0;
        box-sizing: border-box;
      }

      .btnStyle:hover {
        background: rgba(0, 149, 136, 0.1);
      }

      .submitBox {
        margin-top: 30px;
        text-align: center;
      }
    }

    .rightPart {
      position: relative;

      &::after {
        position: absolute;
        content: '';
        left: -24px;
        top: 0;
        width: 1px;
        height: 100%;
        background: #d5dee7;
      }

      .previewContainer {
        margin-left: 24px;
        background: #f1f1f2;
        color: #333;
        font-size: 12px;
        line-height: 21px;

        .previewContent {
          margin: 0 30px 0 30px;
          padding-top: 30px;

          .underLine {
            border-bottom: 1px solid #666;
            /*style="display: flex;justify-content: flex-start;margin-bottom: 6px"*/
          }

          .pt24 {
            padding-top: 24px;
          }

          .ctTtile {
            font-size: 18px;
            line-height: 18px;
            text-align: center;
          }

          .ctUscc {
            margin-top: 24px;
            text-align: right;
            font-size: 10px;

            .explain {
              text-decoration: underline;
            }
          }

          .content {
            padding: 0 0 10px 20px;

            .ctClub {
              padding-top: 100px;
              text-align: right;
            }

            .ctDate {
              padding-bottom: 60px;
              text-align: right;
            }
          }
        }

        .note {
          padding: 14px 27px;
          border-top: 1px dashed #d6d6d6;
          color: #999;
          font-size: 12px;
        }
      }
    }

    /deep/ .el-dialog__footer {
      height: 60px;
    }

    /deep/ .el-checkbox {
      display: block;
      margin-top: 10px;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #606266;
    }

    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      border-color: #009588;
      background: #009588;
    }

    @media screen and (max-width: 1200px) {
      .rightPart {
        &::after {
          width: 0;
        }
      }
    }
  }
}
.repeatTxt {
  margin-bottom: 12px;
  color: #999;
}
.repeatProblem {
  padding-bottom: 12px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  .problemItem {
    padding: 8px 8px 5px 8px;
  }
}
</style>
<style lang="less">
.suggest {
  display: flex;
  -webkit-display: flex;
  justify-content: flex-start;
  .tipBox {
    p {
      span {
        font-size: 12px !important;
        line-height: 21px;
      }
    }
  }
}
</style>
